import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'
import { Form, Input, Button, message, Spin } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import DocumentTitle from 'react-document-title'
import './index.less'
import { login, getUserInfo } from '@/store/actions'

const Login = (props) => {
  const [form] = Form.useForm()
  const { token, login, getUserInfo } = props

  const [loading, setLoading] = useState(false)

  const handleLogin = (username, password) => {
    // 登录完成后 发送请求 调用接口获取用户信息
    setLoading(true)
    login(username, password)
      .then((data) => {
        message.success('登录成功')
        handleUserInfo(data.token)
      })
      .catch((error) => {
        setLoading(false)
        message.error(error)
      })
  }

  // 获取用户信息
  const handleUserInfo = (token) => {
    getUserInfo(token)
      .then((_) => { })
      .catch((error) => {
        message.error(error)
      })
  }

  const handleSubmit = () => {
		
    // // 阻止事件的默认行为
    // event.preventDefault();

    // // 对所有表单字段进行检验
    // form.validateFields((err, values) => {
    //   // 检验成功
    //   if (!err) {
    //     const { username, password } = values;
    //     handleLogin(username, password);
    //   } else {
    //     console.log("检验失败!");
    //   }
    // });

    form.validateFields().then(values => {
      console.log(values)
      const { username, password } = values
      handleLogin(username, password)
    }).catch(error => {
      console.log(error)
    })
  }

  if (token) {
    return <Redirect to="/dashboard" />
  }
  return (
    <DocumentTitle title={'用户登录'}>
      <div className="login-container">
        <Form onFinish={handleSubmit} name="control-hooks" className="content" form={form}>
          <div className="title">
            <h2>用户登录</h2>
          </div>
          <Spin spinning={loading} tip="登录中...">
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
              <Input
                prefix={
                  <UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} label="密&nbsp;&nbsp;码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
              <Input
                prefix={
                  <LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item wrapperCol={{offset: 5, span: 19}}>
              <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
            </Form.Item>
            <Form.Item wrapperCol={{offset: 5, span: 19}}>
              <span>账号 : admin 密码 : 随便填</span>
            </Form.Item>
          </Spin>
        </Form>
      </div>
    </DocumentTitle>
  )
}


export default connect((state) => state.user, { login, getUserInfo })(Login)
